<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>博客页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="assets/css/LineIcons.css">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="assets/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="assets/css/style.css">

</head>
<body>
<div id="div_vue">
    <!-- 导入页眉 -->
    <div class="header"></div>
    <!--====== 自定义代码开始 ======-->
    <section id="about" class="about-area" style="margin-top: 2.5rem">
        <div>
            <form id="form_search">
                <div style="width: 30rem;margin-left: 37%;margin-bottom: 3rem;">
                    <input class="form-control" type="text" name="searchArticle" id="insearch" placeholder="搜索">
                    <button type="button" class="btn btn-primary"
                            style="margin-left:45%;margin-top: 5px;position: absolute;right:23%;top: 75px"
                            v-on:click="refreshArticleList()">搜索
                    </button>
                </div>
            </form>
        </div>


        <div class="container">
            <!--====== 从这里开始 ======-->
            <div class="row col-sm-8 offset-md-2" style="margin-top: 5%;">
                <table class="table">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col">文章标题</th>
                        <th scope="col">发布日期</th>
                        <th scope="col">点赞数量</th>
                        <th scope="col">阅读</th>
                    </tr>
                    </thead>
                    <tr v-for="article in articleList">
                        <td>{{article.articleName}}</td>
                        <td>{{article.articleProduce}}</td>
                        <td>{{article.articleLike}}</td>
                        <td>
                            <button type="button" class="btn btn-primary" @click="toDetail(article.articleId)">阅读</button>
                        </td>
                    </tr>
                </table>
            </div>
            <!--====== 从这里结束 ======-->
            <form action="" class="form-group">
                <div class="offset-4">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous" aria-hidden="true"
                                   v-on:click="backward">
                                    &laquo;
                                </a>
                            </li>
                            <li class="page-item"><a v-on:click="time" class="page-link" href="#">时间排序</a></li>
                            <li class="page-item"><a v-on:click="firstPage" class="page-link" href="#">首页</a></li>
                            <input id="input" type="text" class="col-sm-1" style="border-color: rgb(222,226,230);">
                            <button type="button" class="btn btn-primary" v-on:click="jump">跳转到/页</button>
                            <li class="page-item"><a v-on:click="lastPage" class="page-link" href="#">尾页</a></li>
                            <li class="page-item"><a v-on:click="Likes" class="page-link" href="#">点赞排序</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next" aria-hidden="true" v-on:click="forward">
                                    &raquo;
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </form>
        </div> <!-- container -->
    </section>
    <!--====== 自定义代码结束 ======-->


    <!-- 导入页脚 -->
    <div class="footer"></div>
</div>
<!--导入所有js文件-->
<!--====== Jquery js ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>
<!--====== Isotope js ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Scrolling Nav js ======-->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/scrolling-nav.js"></script>
<!--====== Main js ======-->
<!--<script src="assets/js/main.js"></script>-->
<script src="assets/js/jquery.js"></script>
<!--====== validation js ======-->
<script src="assets/js/validation-1.19.2/jquery.validate.min.js"></script>
<script src="assets/js/validation-1.19.2/localization/messages_zh.min.js"></script>
<!--======vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--======HttpUtil js ======-->
<script src="assets/js/util/HttpUtil.js"></script>
</body>
</html>
<script type="text/javascript">

    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });
  /*  $(function () {

        indata()
    });

    function indata() {
        $("#form_search").validate({
            rules: {
                searchArticle: {required: true}
            },
            messages: {
                searchArticle: {required: "输入不能为空!!"}
            },
        });
    }*/

    // var vm = new Vue({
    //     el: '#div_vue',
    //     data: {
    //         articleList: []
    //     },
    //     methods: {
    //         refreshArticleList: function () {
    //             let url = "search.do";
    //             let searchArticleVal = $("#insearch").val();
    //             let params = {searchArticle: searchArticleVal};
    //             let thisObj = this;
    //             console.log(searchArticleVal);
    //             //ajax请求
    //             getWithParams(url, params, function (resp) {
    //                 //返回的文章集合传给data
    //                 thisObj.articleList = resp;
    //                 console.log("tww");
    //                 console.log(thisObj.articleList);
    //
    //             })
    //         },
    //     },
    //     mounted: function () {
    //         //页面加载完成，并且vue对象加载完成之后调用
    //         // this.refreshArticleList();
    //     },
    // });

    //--------------------------------------------------------------------

    var vm1 = new Vue({
        el: '#div_vue',
        data: {
            articleList: []
        },
        methods: {
            firstPage: function () {
                var url = "ArticlePagination1.do";
                console.log("首页");
                let parm = {a: 0, b: 1};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                })
            },
            backward: function () {
                console.log("后退函数");
                url = "ArticlePagination1.do";
                let parm = {a: 1, b: -168};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                })
            },
            forward: function () {
                console.log("前进函数");
                let url = "ArticlePagination1.do";
                let parm = {a: 0, b: -168};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                });
            },
            jump: function () {
                console.log("页码跳转");
                let url = "ArticlePagination1.do";
                let b = $("#input").val();
                let parm = {a: 0, b: b};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                });
            },
            lastPage: function () {
                console.log("尾页");
                let url = "ArticlePagination1.do";
                let parm = {a: 0, b: 10086};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                });
            },
            Likes: function () {
                console.log("点赞排序");
                let url = "ArticlePagination1.do";
                let parm = {a: 0, b: 1, c: 1};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                })
            },
            time: function () {
                console.log("时间排序");
                let url = "ArticlePagination1.do";
                let parm = {a: 0, b: 1, c: 0};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                })
            },
            toDetail: function (id) {
                let url = "articleView.do";
                let params = {articleId: id};
                postWithoutJson(url, params, function (resp) {
                    console.log(resp)
                });
                console.log(id);
                location.href = "articleDetail.html?articleId=" + id;
            },
            refreshArticleList: function () {
                let url = "ArticlePagination1.do";
                let searchArticleVal = $("#insearch").val();
                let params = {searchArticle: searchArticleVal, a: 0, b: 1, c: 2};
                let thisObj = this;
                if (searchArticleVal == null || searchArticleVal == '' || searchArticleVal == undefined) {
                    alert("请输入搜索内容");
                    return;
                }
                //ajax请求
                doPost(url, params, function (resp) {
                    //返回的文章集合传给data
                    thisObj.articleList = resp;
                    console.log(thisObj.articleList);
                })
            },
        },
        mounted: function () {
            this.time();
        },
    });


</script>